<template>
  <el-container>
    <el-header>
      <el-steps style="width: 100%" :active="active" finish-status="success" align-center>
        <el-step title="上传文件" />
        <el-step title="数据处理" /> </el-steps
    ></el-header>

    <el-main v-show="active == 0">
      <div>
        <el-upload
          ref="uploadRef"
          drag
          :auto-upload="false"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="state.fileList"
          action=""
          :on-change="handleChange"
          accept="*"
        >
          <el-icon class="el-icon--upload">
            <el-icon-upload-filled />
          </el-icon>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
          </template>
        </el-upload>
      </div>
    </el-main>

    <el-main v-show="active == 1">
      <el-form label-width="180px">
        <el-form-item label="拆分规则">
          <el-radio-group v-model="form.trainingPattern">
            <el-radio label="0" size="large">文本拆分</el-radio>
            <el-radio label="1" size="large">AI文件拆分</el-radio>
          </el-radio-group></el-form-item
        >
        <el-form-item label="AI文本拆分提示词" v-show="form.trainingPattern == '1'">
          <el-input v-model="form.qAPromptTemplate" :autosize="false" :rows="5" class="input" resize="none" type="textarea"> </el-input
        ></el-form-item>

        <el-form-item label="处理模式" v-show="form.trainingPattern == '0'">
          <el-radio-group v-model="form.mode">
            <el-radio label="0" size="large">自动</el-radio>
            <el-radio label="1" size="large">自定义</el-radio>
          </el-radio-group></el-form-item
        >

        <el-form-item label="段落最大Token" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.maxTokensPerParagraph" :min="1" size="small" controls-position="right" />
        </el-form-item>
        <el-form-item label="每行最大Tokens" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.maxTokensPerLine" :min="1" size="small" controls-position="right" />
        </el-form-item>
        <el-form-item label="段落之间重叠标记的数目" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.overlappingTokens" :min="1" size="small" controls-position="right" />
        </el-form-item>
      </el-form>
    </el-main>
    <div style="display: flex; justify-content: flex-end">
      <el-button v-show="active > 0" style="margin-top: 12px; max-width: 100px" @click="pre">上一步</el-button>
      <el-button v-show="active < 1" style="margin-top: 12px; max-width: 100px" :disabled="state.fileList.length <= 0" @click="next">下一步</el-button>
      <el-button v-show="active == 1" style="margin-top: 12px; max-width: 100px" @click="submit">提交数据</el-button>
      <!-- <el-button style="margin-top: 12px; max-width: 100px" @click="back" type="primary">返回</el-button> -->
    </div>
  </el-container>
</template>

	  <script>
import scCron from '@/components/scCron';
import { genFileId } from 'element-plus';

export default {
  name: 'AIKnowledgenDetailUploadManage',
  components: {
    scCron,
  },
  props: {
    wikiId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      active: 0,
      isSaveing: false,
      currentId: '',
      column: [
        {
          label: '文件名',
          prop: 'fileName',
          width: '150',
        },
        {
          label: '索引数量',
          prop: 'dataCount',
          width: '100',
        },
        {
          label: '数据类型',
          prop: 'type',
          width: '100',
        },
        {
          label: '数据状态',
          prop: 'stateoperator',
          width: '150',
        },
        {
          label: '创建时间',
          prop: 'creationTime',
          width: '150',
        },
        {
          label: '操作',
          prop: 'operator',
          width: '170',
          fixed: 'right',
          align: 'right',
        },
      ],
      state: {
        fileList: [],
      },
      form: {
        trainingPattern: '0',
        wikiId: '',
        fileName: '',
        path: '',
        fileId: '',
        mode: '0',
        qAPromptTemplate: `我会给你一段文本，学习它们，并整理学习成果，要求为：
        1. 提出最多 20 个问题。
        2. 给出每个问题的答案。
        3. 答案要详细完整，答案可以包含普通文字、链接、代码、表格、公示、媒体链接等 markdown 元素。
        4. 按格式返回多个问题和答案:

        Q1: 问题。
        A1: 答案。
        Q2:
        A2:
        ……

        我的文本："""{{$input}}"""`,
        maxTokensPerParagraph: 1000,
        maxTokensPerLine: 300,
        overlappingTokens: 100,
      },
    };
  },
  async mounted() {
    this.$nextTick(() => {
      this.form.wikiId = this.wikiId;
    });
  },
  methods: {
    // back() {
    //   this.$emit('back');
    // },
    setWiki(id) {
      this.$nextTick(() => {
        this.form.wikiId = id;
        this.state.fileList = [];
        this.form.fileName = '';
        this.form.fileId = '';
        this.form.path = '';
        this.active = 0;
        this.form.trainingPattern = '0';
        this.form.mode = '0';
        this.form.qAPromptTemplate = `
		我会给你一段文本，学习它们，并整理学习成果，要求为：
        1. 提出最多 20 个问题。
        2. 给出每个问题的答案。
        3. 答案要详细完整，答案可以包含普通文字、链接、代码、表格、公示、媒体链接等 markdown 元素。
        4. 按格式返回多个问题和答案:

        Q1: 问题。
        A1: 答案。
        Q2:
        A2:
        ……

        我的文本："""{{$input}}"""`;
        this.form.maxTokensPerParagraph = 1000;
        this.form.maxTokensPerLine = 300;
        this.form.overlappingTokens = 100;
        this.$refs.uploadRef.clearFiles();
      });
    },
    pre() {
      this.active = this.active - 1;
    },
    next() {
      this.active = this.active + 1;
    },
    add() {},
    upsearch() {
      // this.$refs.table.upData(this.search);
    },
    handleChange(file, fileList) {
      this.state.fileList = fileList;
      this.uploadFile();
    },
    handleExceed(files) {
      this.$refs.uploadRef.clearFiles();
      this.state.fileList = [];
      let file = files[0];
      file.uid = genFileId();
      this.$refs.uploadRef.handleStart(file);
    },

    async uploadFile() {
      if (this.state.fileList.length < 1) return;
      let response = await this.$API.upload.upload3.post(this.state.fileList[0].raw);

      if (response.code != 200) {
        this.$message.error(response.message);
        return;
      }

      this.form.fileName = response.data.name;
      this.form.path = response.data.url;
      this.form.fileId = response.data.fileId;
      this.$message.success('上传成功');
    },
    //表单提交方法
    async submit() {
      var res = await this.$API.aiWiki.knowledgeCreate.post(this.form);
      this.isSaveing = false;
      if (res.code == 200) {
        this.$emit('success');
        this.$message.success('操作成功');
      } else {
        this.$alert(res.message, '提示', { type: 'error' });
      }
    },
    /**
     * 详情展示
     * @param row 数据
     */
    table_show(row) {
      console.log(row);
    },
    /**
     * 重试
     * @param row 数据
     */
    table_retry(row) {
      console.log(row);
    },
    /**
     * 删除
     * @param row 数据
     */
    table_del(row) {
      console.log(row);
    },
  },
};
</script>
  <style>
</style>
